<template>
  <div class="tags">
    <!--    伪选择框-->
    <div class="tags-box" :class="[selectType == true?'tags-box-border-choose':'tags-box-border']">
      <span class="tags-box-title" v-if="tagsForm.length == 0">请选择标签</span>
      <div class="tags-item" v-for="item in tagsForm">
        <div class="select-item-sign" :style="{backgroundColor:item.color}"></div>
        <span class="tags-item-title">{{ item.name }}</span>
        <i class="el-icon-close tags-item-icon" @click="delClick(item)"></i>
      </div>
      <i class="tags-box-icon el-icon-arrow-down"
         :class="[selectType == false?'transformIconChoose':'transformIcon']"></i>
    </div>
    <el-select ref="tagsSelect" style="width: 100%" v-model="selectTitle" @visible-change="visibleChange" size="medium"
               placeholder="请选择">
      <template slot="empty">
        <div class="select" v-infinite-scroll="load">
          <div class="select-item" v-for="item in options" @click.stop="groupClick(item)">
            <el-checkbox v-model="item.type" @click.stop.native="checkboxClick">
              <div style="display: flex;flex-direction: row;align-items: center">
                <div class="select-item-sign" :style="{backgroundColor:item.color}"></div>
                <span>{{ item.name }}</span>
              </div>
            </el-checkbox>
          </div>
          <el-empty description="暂无数据" :image-size="40" v-if="options.length == 0"></el-empty>
        </div>
      </template>
    </el-select>
  </div>
</template>
<script>
import {list} from '@/api/tag.js'

export default {
  data() {
    return {
      options: [],
      selectTitle: '',
      selectType: false,
      tagsForm: [],
      checkboxloading: false,
      infiniteType: false,
      current: 1
    }
  },
  props: ['type', 'tags'],
  watch: {
    tags: {
      handler(val, oldval) {
        if (val) {
          this.tagsForm = val
        }
      },
      // 深度观察监听
      deep: true,
      immediate: true
    }
  },
  created() {

  },
  methods: {
    groupClick(item) {
      item.type = !item.type
      this.filterClick()
    },
    checkboxClick(data) {
      var _this = this
      if (_this.checkboxloading == true) {
        return
      }
      _this.checkboxloading = true
      setTimeout(function () {
        console.log(data)
        console.log('进来了')
        _this.checkboxloading = false
        _this.filterClick()
      }, 100)
    },
    delClick(item) {
      console.log(item)
      var _this = this
      _this.options.forEach(function (items) {
        if (items.tagId == item.tagId) {
          items.type = false
        }
      })
      _this.filterClick()
    },
    filterClick() {
      var _this = this
      var data = []
      _this.options.forEach(function (item) {
        if (item.type == true) {
          data.push(item)
        }
      })
      _this.tagsForm = data
      _this.$emit('tagChoose', _this.tagsForm)
    },
    visibleChange(item) {
      var _this = this
      _this.selectType = item
      if (item == true && _this.options.length == 0) {
        _this.loadList()
      }
    },
    loadList() {
      var _this = this

      list({current: _this.current, size: 10, tagType: this.type}).then(res => {
        res.data.records.forEach(function (item) {
          item.type = false
          if (_this.tagsForm.length > 0) {
            _this.tagsForm.forEach(function (items) {
              // item.type = false
              if (item.tagId == items.tagId) {
                item.type = true
              }
            })
          }
          _this.options.push(item)
        })
        _this.infiniteType = res.data.records.length < 10
        console.log(res)
      })
    },
    load() {
      if (this.infiniteType == true) {
        return;
      }
      this.current += 1
      this.loadList()
      console.log('滑动')
    },
  }
}
</script>

<style scoped>
.select {
  max-height: 280px;
  overflow: auto;
}

.select-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 10px;
  cursor: pointer;
  color: #333333;
  justify-content: space-between;
}

.select-item:hover {
  background-color: rgba(88, 96, 105, 0.06);
}

.select-item-sign {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}


.tags-item {
  padding: 3px 6px;
  background-color: #ecedf0;
  border-radius: 3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 10px;
  height: 20px;
}

.tags-item-title {
  max-width: 66px;
  font-size: 12px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 5px;
}

.tags-item-icon {
  font-size: 12px;
  color: #909aaa;
  margin-top: 1px;
  pointer-events: auto;
}


.tags {
  width: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e47777;
  border-radius: 4px;
  position: relative;
}

.tags-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 4px;
  pointer-events: none;
  background-color: white;
  padding-left: 10px;
  padding-right: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tags-box-icon {
  color: #C0C4CC;
  font-size: 14px;
  transition: transform .3s;
  cursor: pointer;
  position: absolute;
  right: 10px;
}

.transformIcon {
  transform: rotateZ(-180deg);
}

.transformIconChoose {
  transform: rotateZ(0deg);
}

.tags-box-border {
  border: 1px solid #DCDFE6;
}

.tags-box-border-choose {
  border: 1px solid #1890ff;
}

.tags-box-title {
  color: #C0C4CC;
  font-size: 14px;
}


</style>
